<template>
  <div class="home">
     <transition name="mask">
    <div class='Maskicon' v-if="tabms" @click="hidems">
        <div class="selficon">
            <Header><h2>个人信息</h2></Header>
            <ul>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="text" class="username" placeholder="用户名">
                </li>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="text" class="username" placeholder="金额">
                </li>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="tel" class="username" placeholder="电话">
                </li>
                <li>
                    <i class="iconfont icon-wodedangxuan"></i>
                    <input type="email" class="username" placeholder="邮箱">
                </li>
            </ul>
        </div>
    </div>
    </transition>
    <!-- <Maskicon :tabms="tabms"/> -->
    <Header><h2><i class="iconfont icon-wode portrait"  @click="showmask"></i>首页</h2></Header>
    <div class="home-swipe">
        <mt-swipe :auto="4000" :show-indicators="true">
        <mt-swipe-item v-for="Swipedata in Swipedatas" :key="Swipedata.id">
        <img
          :src="Swipedata.imgurl"
          alt=""
        />
        </mt-swipe-item>
    </mt-swipe>
    </div>
    <div class="container-wrap audiotitle">
      <h2> <i class="iconfont icon-dianpu"></i> 推荐视频</h2>
    </div>
    <div class="container-wrap vdioimg">
      <video controls>
            <source src="@/assets/images/myvideo.mp4"/>
      </video>
    </div>
  </div>
</template>

<script>
import  Header from '@/components/Header.vue';
// import  Maskicon from "./components/Maskicon.vue"
export default {
  name: 'Home',
  components: {
    Header,
    // Maskicon
  },
  data(){
    return {
      tabms:false
    }
  },
  computed:{
        Swipedatas(){
          return this.$store.state.swipedatas
        }
  },
  methods:{
    showmask(){
      this.tabms=true
    },
     hidems(){
      console.log(this.tabms);
      this.tabms=false
    }
  },
  mounted(){
    this.$store.dispatch("actSwipedatas")
  }
}
</script>
<style lang="less">
.mask-enter,
.mask-leave-to {
  transform: translateX(-100%);
}

.mask-enter-active,
.mask-leave-active {
  transition: all 0.5s linear;
}
  .home{
        .Maskicon{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 99999;
            .selficon{
                width: 90%;
                height: 100%;
                background-color: #fff;
                ul{
                    padding-top: 16rem;
                    width: 100%;
                    height: auto;
                    display: flex;
                    flex-wrap: wrap;
                    // margin-top: 5rem;
                    li{
                        width: 100%;
                        background-color: #fff;
                        padding: 2rem;
                        border: 1px solid #ccc;
                        input{
                            outline: none;
                            border:none;
                            margin-left: 2rem;
                        }
                    }
                }
            }
            .header{
                width: 90%;
            }
        }
          .portrait{
            display: block;
            position: absolute;
            top: 0;
            left: 2rem;
            font-size: 3rem;
          }
        padding: 0 1rem;
        .home-swipe {
        height: 18rem;
        margin-top: 4.5rem;
        img {
          width: 100%;
          // border-radius: 1rem;
        }
      }
      .audiotitle{
        h2{
          // font-weight: normal;
          font-size: 1.6rem;
          color: #666;
        }
        // padding: 1rem 1rem;
      }
      .vdioimg{
        // width: 100%;
        video{
          width: 100%;
          height: 20rem;        
        }
      }
  }
</style>
